<template>
  <div>
    <div class="space-12"></div>
    <div class="row">
      <div class="col-xs-12">
        <div class="text-center">
          <span class="btn btn-app btn-sm btn-light no-hover">
              <span class="line-height-1 bigger-170 blue"> 518 </span>
              <br>
              <span class="line-height-1 smaller-90"> 课程 </span>
          </span>
          <span class="btn btn-app btn-sm btn-yellow no-hover">
              <span class="line-height-1 bigger-170"> 6,321 </span>

              <br>
              <span class="line-height-1 smaller-90"> 大章 </span>
          </span>

          <span class="btn btn-app btn-sm btn-pink no-hover">
              <span class="line-height-1 bigger-170"> 4,182 </span>

              <br>
              <span class="line-height-1 smaller-90"> 小节 </span>
          </span>

          <span class="btn btn-app btn-sm btn-success no-hover">
              <span class="line-height-1 bigger-170"> 5.23 </span>

              <br>
              <span class="line-height-1 smaller-90"> 会员(万) </span>
          </span>

          <span class="btn btn-app btn-sm btn-primary no-hover">
              <span class="line-height-1 bigger-170"> 12.76 </span>

              <br>
              <span class="line-height-1 smaller-90"> 报名(万) </span>
          </span>

          <span class="btn btn-app btn-sm btn-grey no-hover">
              <span class="line-height-1 bigger-170"> 32.96 </span>

              <br>
              <span class="line-height-1 smaller-90"> 评论(万) </span>
          </span>

        </div>

        <div class="space-12"></div>

        <div class="hr hr2 hr-double"></div>

        <div class="space-12"></div>

      </div>

      <div class="col-sm-12 infobox-container">
        <div class="infobox infobox-green">
          <div class="infobox-icon">
            <i class="ace-icon fa fa-comments"></i>
          </div>

          <div class="infobox-data">
            <span class="infobox-data-number">332</span>
            <div class="infobox-content">新增评论</div>
          </div>

          <div class="stat stat-success">8%</div>
        </div>

        <div class="infobox infobox-blue">
          <div class="infobox-icon">
            <i class="ace-icon fa fa-twitter"></i>
          </div>

          <div class="infobox-data">
            <span class="infobox-data-number">58</span>
            <div class="infobox-content">新增注册会员</div>
          </div>

          <div class="badge badge-success">
            +10%
            <i class="ace-icon fa fa-arrow-up"></i>
          </div>
        </div>

        <div class="infobox infobox-pink">
          <div class="infobox-icon">
            <i class="ace-icon fa fa-shopping-cart"></i>
          </div>

          <div class="infobox-data">
            <span class="infobox-data-number">108</span>
            <div class="infobox-content">课程报名</div>
          </div>
          <div class="stat stat-important">4%</div>
        </div>

        <div class="space-12"></div>

        <div class="hr hr2 hr-double"></div>

        <div class="space-12"></div>

      </div>

      <div class="col-sm-12">
        <div class="widget-box transparent">
          <div class="widget-header widget-header-flat">
            <h4 class="widget-title lighter">
              <i class="ace-icon fa fa-signal"></i>
              销售量
            </h4>

          </div>

          <div class="widget-body">
            <div class="widget-main padding-4">
              <div id="sales-charts"></div>
            </div><!-- /.widget-main -->
          </div><!-- /.widget-body -->
        </div><!-- /.widget-box -->

        <div class="space-12"></div>

        <div class="hr hr2 hr-double"></div>

        <div class="space-12"></div>
      </div><!-- /.col -->

      <div class="col-sm-6">
        <div class="widget-box transparent">
          <div class="widget-header widget-header-flat">
            <h4 class="widget-title lighter">
              <i class="ace-icon fa fa-star orange"></i>
              课程销售排名
            </h4>

          </div>

          <div class="widget-body">
            <div class="widget-main no-padding">
              <table class="table table-bordered table-striped">
                <thead class="thin-border-bottom">
                <tr>
                  <th>
                    <i class="ace-icon fa fa-caret-right blue"></i>课程名称
                  </th>

                  <th>
                    <i class="ace-icon fa fa-caret-right blue"></i>价格
                  </th>

                  <th>
                    <i class="ace-icon fa fa-caret-right blue"></i>购买数
                  </th>
                </tr>
                </thead>

                <tbody>
                <tr>
                  <td>开发工具IDEA从入门到爱不释手</td>

                  <td>
                    <b class="green">￥299.00</b>
                  </td>

                  <td>
                    <span class="label label-warning arrowed arrowed-right">5,132</span>
                  </td>
                </tr>

                <tr>
                  <td>开发工具IDEA从入门到爱不释手</td>

                  <td>
                    <b class="red">￥388.00</b>
                  </td>

                  <td>
                    <span class="label label-warning arrowed arrowed-right">3,132</span>
                  </td>
                </tr>

                <tr>
                  <td>开发工具IDEA从入门到爱不释手</td>

                  <td>
                    <b class="green">￥199.00</b>
                  </td>

                  <td>
                    <span class="label label-warning arrowed arrowed-right">2,132</span>
                  </td>
                </tr>

                <tr>
                  <td>开发工具IDEA从入门到爱不释手</td>

                  <td>
                    <b class="green">￥299.00</b>
                  </td>

                  <td>
                    <span class="label label-success arrowed arrowed-right">1,654</span>
                  </td>
                </tr>

                <tr>
                  <td>开发工具IDEA从入门到爱不释手</td>

                  <td>
                    <b class="green">￥199.00</b>
                  </td>

                  <td>
                    <span class="label label-success arrowed arrowed-right">1,254</span>
                  </td>
                </tr>
                </tbody>
              </table>
            </div><!-- /.widget-main -->
          </div><!-- /.widget-body -->
        </div><!-- /.widget-box -->
      </div><!-- /.col -->
      <div class="col-sm-6">
        <div class="widget-box transparent">
          <div class="widget-header widget-header-flat">
            <h4 class="widget-title lighter">
              <i class="ace-icon fa fa-star orange"></i>
              分类销售排名
            </h4>

          </div>

          <div class="widget-body">
            <div class="widget-main">
              <div id="piechart-placeholder"></div>

            </div><!-- /.widget-main -->
          </div><!-- /.widget-body -->
        </div><!-- /.widget-box -->
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div>
</template>

<script>
    export default {
        name: "welcome",
        mounted: function () {
            let _this = this;
            // sidebar激活样式方法一
            // this.$parent.activeSidebar("welcome-sidebar");
            _this.drawSaleChart();
            _this.drawPieChart();
        },
        methods: {
            drawSaleChart() {
                // 生成随机两组数据
                let d1 = [];
                for (let i = 0; i < 30; i += 1) {
                    d1.push([i + 1, 2000 + Math.floor((Math.random()*100)+1)]);
                }
                let d2 = [];
                for (let i = 0; i < 30; i += 1) {
                    d2.push([i + 1, 1900 + Math.floor((Math.random()*100)+1)]);
                }

                let sales_charts = $('#sales-charts').css({'width':'100%' , 'height':'220px'});
                $.plot("#sales-charts", [
                    { label: "最近30天", data: d1 },
                    { label: "上一周期", data: d2 },
                ], {
                    hoverable: true,
                    shadowSize: 0,
                    series: {
                        lines: { show: true },
                        points: { show: true }
                    },
                    xaxis: {
                        tickLength: 0
                    },
                    yaxis: {
                        tickLength: 0
                    },
                    grid: {
                        backgroundColor: { colors: [ "#fff", "#fff" ] },
                        borderWidth: 1,
                        borderColor:'#555'
                    }
                });
            },

            drawPieChart() {
                let placeholder = $('#piechart-placeholder').css({'width':'90%' , 'min-height':'180px'});
                let data = [
                    { label: "Java",  data: 38.7, color: "#68BC31"},
                    { label: "Python",  data: 24.5, color: "#2091CF"},
                    { label: "Android",  data: 18.6, color: "#DA5430"},
                    { label: "其它",  data: 10, color: "#FEE074"},
                ];
                $.plot(placeholder, data, {
                    series: {
                        pie: {
                            show: true,
                            tilt:0.8,
                            highlight: {
                                opacity: 0.25
                            },
                            stroke: {
                                color: '#fff',
                                width: 2
                            },
                            startAngle: 2
                        }
                    },
                    legend: {
                        show: true,
                        position: "ne",
                        labelBoxBorderColor: null,
                        margin:[-30,15]
                    }
                    ,
                    grid: {
                        hoverable: true,
                        clickable: true
                    }
                })
            },
        }
    }
</script>
